import {  TabBar } from 'antd-mobile';
import {
  useHistory,
  useLocation,
} from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons';
// 底部导航栏
const Bottom = () => {
    const history = useHistory()
    const location = useLocation()
    const { pathname } = location
  
    const setRouteActive = (value) => {
      history.push(value)
    }
  
    const tabs = [
      {
        key: '/',
        title: '首页',
        icon: <AppOutline />,
      },
      {
        key: '/new',
        title: '新手入门',
        icon: <UnorderedListOutline />,
      },
      {
        key: '/about',
        title: '关于',
        icon: <MessageOutline />,
      },
      {
        key: '/collect',
        title: '收藏列表',
        icon: <UserOutline />,
      },
    ]
  
    return (
      <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    )
  }
  export default Bottom;